<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<h1>工程首页</h1>
<a href="/reg.html">注册</a>
<a href="/login.html">登录</a>
<h2>{{info}}</h2>
<!--    如果登陆过显示发布微博-->
    <div v-if="info!='请先登录！'">
    <a href="/insert.html">发布微博</a>
        <a href="" @click="logout()">退出登录</a>
    </div>
    <hr>
    <div v-for="weibo in arr">
        <h3>{{weibo.nick}}说：{{weibo.content}}</h3>
        <span>发布日期：{{weibo.created}}</span>
<!--        判断当前登陆的用户id 等于微博的userId 则显示删除-->
        <a href="javascript:void(0)" v-if="user.id==weibo.userId" @click="del(weibo.id)">删除</a>
    </div>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>

        let v=new Vue({
                el:"body>div",
                data:{
                    user:{},
                    info:"",
                    arr:[]
                },
            created:function(){
              axios.get("/currentUser").then(function (response) {
                  v.user=response.data;
                  if(response.data==""){
                      v.info="请先登录！"
                  }else {
                      v.info="欢迎"+v.user.nick;
                  }

              })
                //
                axios.get("/select").then(function (response) {
                    v.arr=response.data;
                })
            },
                methods:{
                    logout(){
                        axios.get("/logout").then(function () {
                            v.info="请先登录！"
                            // 去掉当前登录的用户对象，为了让删除不显示
                            v.user=""
                        })
                    },
                    del(id){
                        if(confirm("您确定删除这条微博吗？")){
                            axios.get("/delete?id="+id).then(function () {
                                location.reload();
                            })
                        }
                    }
                }
            })

</script>
</body>
</html>